<script setup>
import { onMounted, reactive, ref } from 'vue';
import axios from 'axios';
import * as echarts from 'echarts'


const echartBar = ref();
let options = reactive([])
function chartInit() {
    //图表
    const myChart = echarts.init(echartBar.value, "light", {
        width: 900,
        height: 450
    });
    var option = {
        legend: {
            orient: 'vertical',  // 垂直排列
            left: 'right',       // 将图例放置在右侧
            top: 'center',       // 图例垂直居中
            padding: [0, 20],    // 控制图例与图表之间的水平和垂直间距
            itemGap: 10,         // 设置图例项之间的间距 
            textStyle: {
                color: 'white'
            }
        },
        //饼图上显示数据
            tooltip: {
                trigger: 'item',
                //show: true,
                formatter: '{b}: {c}'  // 显示学校名称和分数
            },
        series: [{
            type: 'pie',
            radius: ['30%', '70%'],
            //设置南丁格尔效果
            roseType: 'area',
            itemStyle: {
                borderRadius: 8
            },
            
            data:[]
        }]
    }
    const xdata=[]
    const ydata=[]

    for (let index = 0; index < options.length; index++) {
        let obj=options[index];
        xdata.push({
            name: obj.schoolName,  // 学校名称
            value: obj.totalScore  // 总分
        })
        ydata.push(obj.schoolName)   // 存储学校名称，用于 legend
    }
     // 配置 series 数据
    option.series[0].data=xdata
    //图表与数据项的绑定
    myChart.setOption(option);
}

function getData() {
    //获取服务器数据
    axios.get('/Pro-Postgraduate/queryAllComputerToptwentyUniversities')
        .then((response) => {
            console.log("********")
            //if (response.data.code == 200) {
                console.log(response.data)
                options = response.data;
                 chartInit();
            //}
        })
}
onMounted(() => {
    getData();
})
</script>

<template>
    <h2 style="position: fixed;left:50%;top: 9%;color:azure;">计算机科学与技术专业TOP20学校</h2>
    <div ref="echartBar"style="width: 90%;height: 450px;position: relative;padding-left: 0px;margin-left: -200px;"></div>
</template>

<style lang="css" scoped></style>